<template>
  <div class="app">
    <div class="dingwei">
    <div class="header">
      <span class="title" @click="add"><van-icon name="arrow-left" /></span><span >联发君澜</span>
    </div>
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
    <van-swipe-item><img src="http://121.199.51.160:8080/img/swiper/1.png" alt=""></van-swipe-item>
    <van-swipe-item><img src="http://121.199.51.160:8080/img/swiper/2.png" alt=""></van-swipe-item>
    <van-swipe-item><img src="http://121.199.51.160:8080/img/swiper/3.png" alt=""></van-swipe-item>
    <van-swipe-item><img src="http://121.199.51.160:8080/img/swiper/1.png" alt=""></van-swipe-item>
    <van-swipe-item><img src="http://121.199.51.160:8080/img/swiper/2.png" alt=""></van-swipe-item>
    <van-swipe-item><img src="http://121.199.51.160:8080/img/swiper/3.png" alt=""></van-swipe-item>
    <van-swipe-item><img src="http://121.199.51.160:8080/img/swiper/1.png" alt=""></van-swipe-item>
    <van-swipe-item><img src="http://121.199.51.160:8080/img/swiper/2.png" alt=""></van-swipe-item>
    </van-swipe>
    <div class="body">
      <div class="top">
        <span>联发君庭</span><span>四室两厅</span><span>1250元</span>
        <p>近地铁</p>
      </div>
      <div class="money">
        <div class="a">
          <p>1250/月</p>
          <span>租金</span>
        </div>
        <div class="a">
          <p>1250/月</p>
          <span>租金</span>
        </div>
        <div class="a">
          <p>1250/月</p>
          <span>租金</span>
        </div>
      </div>
      <div class="zhuang">
        <div class="left">
         <p> <span class="color">装修:</span><span>精装</span></p>
         <p> <span class="color">楼层:</span><span>低楼层</span></p>
        </div>
        <div>
          <p> <span class="color">朝向:</span><span>南北</span></p>
          <p> <span class="color">类型:</span><span>普通住宅</span></p>
        </div>
      </div>
    </div>
    <div class="naiwei">
      <div class="wanke"><span>小区:</span><span>万科海上传奇</span></div>
     <div>

     </div>
      <div class="peitao">房屋配套</div>
      <p><i>洗衣机 空调 热水器 天然气</i></p>
      <div class="peitao">房屋概览</div>
      <div class="girl">
        <div><img src="http://121.199.51.160:8080/img/avatar.png" alt=""></div>
        <div class="text">
          <span>王女士</span><br>
          <span class="color">已认证房主</span>
        </div>
        <div><button>发消息</button></div>
    </div>
    <div class="suojin">1周边配套齐全地铁四号线交通便利1周边配套齐全地铁四号线交通便利1周边配套齐全地铁四号线交通便利1周边配套齐全地铁四号线交通便利</div>
  </div>
    </div>

    <div class="footer">
      <div><van-icon name="star-o" /><span>收藏</span></div>
      <div>在线咨询</div>
      <div>电话预约</div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ShOw',

  data () {
    return {

    }
  },
  async created () {
    const res = await this.$http.get(`houses/${this.$route.params.id}`)
    console.log(this.$route.params.id)
    console.log(res)
  },
  mounted () {

  },

  methods: {
    add () {
      this.$router.push('/shouye')
    }
  }
}
</script>

<style  scoped>
.dingwei{
  padding-bottom: 51px;
}
.app{
  background-color: #ccc;
  box-sizing: border-box;
}
.my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: 150px;
    text-align: center;
    background-color: #39a9ed;
    width: 250px;
    height: 200px;
  }
  img{
    width: 300;
    width: 400px;
  }
  .header{
    box-sizing: border-box;
    width: 100%;
    height: 50px;
    background-color: #21b97a;
    line-height: 50px;
    font-size: 18px;
    color: white;
  }
.header .title{
  margin: 0 120px 0 20px;
}
.body{
  padding: 10px 10px;
  background-color: white;
  font-size: 14px;
  margin: 15px 0 15px 0;
  border-radius: 3px;
}
.body .top{
  border-bottom: 1px solid #ccc;
}
.money{
  display: flex;
  border-bottom: 1px solid #ccc;
  text-align: center;
}
.money .a{
  margin-left: 40px;
}
.money .a p{
  color: red;
  font-size: 18px;
}
.money .a span{
  color: #ccc;
}
.zhuang{
  display: flex;
}
.zhuang .left{
margin: 0 100px 0 15px;
}
.zhuang .color{
  color: #ccc;
}
.footer{
  display: flex;
  position: fixed;
  bottom: 0;
  left: 0;
  background-color: white;
}
.footer div{
  width: 124px;
  height: 50px;
  border: 1px solid #ccc;
  text-align: center;
  line-height: 50px;
}
.naiwei{
  background-color: white;
  border-radius: 3px;
}
.wanke{
  padding: 10px;
}
.peitao{
  padding: 10px;
  border-bottom: 1px solid #ccc;
}
.girl{
  display: flex;
  padding: 20px 15px;
  font-size: 14px;
}
.girl img{
  width: 50px;
  height: 50px;
margin-right: 20px;
}
.girl .text{
  margin-top: 5px;
  margin-right: 120px;
}
.girl .text .color{
  color: red;
}
.girl button{
  width: 60px;
  height: 30px;
  background-color: #07c160;
  border: none;
  border-radius: 3px;
  margin-top: 15px;
}
.suojin{
  padding: 0 10px;
  text-indent: 2em;
  font-size: 14px;
  color: #6e6e6e;
}
</style>
